'use strict';

$(document).ready(function () {	
	$('.nav-dropdown-toggle').on('click', function (e) {
		e.preventDefault();
		$(this).parent().toggleClass('open');
	});

	$('ul.nav').find('a.active').parent().parent().parent().addClass('open');

	$('.sidebar-toggle').on('click', function (e) {
		e.preventDefault();
		$('body').toggleClass('sidebar-hidden');
	});

	$('.sidebar-mobile-toggle').on('click', function () {
		$('body').toggleClass('sidebar-mobile-show');
	});

	app.initialize();

	$(window).resize(function () {
		app.resize();
	});
});

var app = {
	DATABASEURI: "./inc/api/database/v1/",
	
	DOM_ICON_LISTS: $(".icon-lists"),
	DOM_CONTENT: $(".icon-lists").parent(),
	DOM_CONTAINER: $(".content"),
	DOM_STYLE_ALL: $("#style-all"),
	DOM_MODAL: $("#modal"),
	DOM_MODAL_TITLE: $(".modal-title"),
	DOM_MODAL_DIALOG: $("#modal").find(".modal-dialog"),
	// DOM_SAMPLE_CODE_TEXTAREA: $("#sample-code-textarea"),
	// DOM_SAMPLE_ICON: $("#sample-icon"),
	BUTTON_SCROLL_TO_TOP: $(".scroll-to-top"),
	BUTTON_COPY_SAMPLE_CODE: "#copy-sample-code",

	ICON_DETAILS: {
		SAMPLE_CODE: $("#sample-code-textarea"),
		SAMPLE_ICON: $("#sample-icon"),
		TITLE: "",
		STYLE: "",
		ICON: ""
	},

	TOOLBAR_SCALES: {
		ICON_ITEM_WIDTH_MAX: $("#icon-item-width-max"),
		ICON_ITEM_WIDTH_MIN: $("#icon-item-width-min"),
		ICON_ITEM_WIDTH_PLUS: $("#icon-item-width-plus"),
		ICON_ITEM_WIDTH_MINUS: $("#icon-item-width-minus")
	},

	TOOLBAR_STYLES: {
		NORMAL: {
			COLOR: $("#toolbar-normal-color"),
			SIZE: $("#toolbar-normal-size"),
			BORDER: $("#toolbar-normal-border"),
			ID: {
				COLOR: $("#toolbar-normal-color").attr('id'),
				SIZE: $("#toolbar-normal-size").attr('id'),
				BORDER: $("#toolbar-normal-border").attr('id')
			}
		},
		FLIP: {
			VERTICAL: $("#toolbar-flip-v"),
			HORIZONTAL: $("#toolbar-flip-h"),
			BOTH: $("#toolbar-flip-both"),
			ID: {
				VERTICAL: $("#toolbar-flip-v").attr('id'),
				HORIZONTAL: $("#toolbar-flip-h").attr('id'),
				BOTH: $("#toolbar-flip-both").attr('id')
			}
		},
		ROTATION: {
			SPIN: $("#toolbar-rotation-spin"),
			PULSE: $("#toolbar-rotation-pulse"),
			ROTATE_90: $("#toolbar-rotation-90"),
			ROTATE_180: $("#toolbar-rotation-180"),
			ROTATE_270: $("#toolbar-rotation-270"),
			ID: {
				SPIN: $("#toolbar-rotation-spin").attr('id'),
				PULSE: $("#toolbar-rotation-pulse").attr('id'),
				ROTATE_90: $("#toolbar-rotation-90").attr('id'),
				ROTATE_180: $("#toolbar-rotation-180").attr('id'),
				ROTATE_270: $("#toolbar-rotation-270").attr('id')
			}
		}
	},

	STYLE_PREFIX: {
		1: "fas",
		2: "far",
		3: "fab"
	},
	STYLE_NAME: {
		"fas": "Solid",
		"far": "Regular",
		"fab": "Brands"
	},

	ICON_LIST: {
		WIDTH: 130,
		MIN_WIDTH: 90,
		MAX_WIDTH: 170,
		STEP: 10,
		LARGE: {
			WIDTH: 130,
			MIN_WIDTH: 90,
			MAX_WIDTH: 170,
			STEP: 10
		},
		SMALL: {
			WIDTH: 55,
			MIN_WIDTH: 45,
			MAX_WIDTH: 70,
			STEP: 5
		}
	},

	initialize: function () {
		this.DOM_CONTAINER.hide();
		this.bind_all_actions();
		this.DOM_STYLE_ALL.trigger("click");
	},

	generate_icon_lists: function (style="%") {
		var that = this;

		that.DOM_CONTAINER.hide();

		$.get(that.DATABASEURI + "get_icon_lists", {style: style}, function (result) {
			if (result.result === "success") {
				var output = "";

				$.each(result.lists, function (index, list) {
					output += that._generate_list_item(list);
				});

				that.DOM_ICON_LISTS.html(output);
				that.DOM_CONTAINER.show();

				if (that.DOM_CONTENT.width() < 600) {
					that.ICON_LIST.WIDTH = that.ICON_LIST.SMALL.WIDTH;
				}

				that.resize();

				$(".list-item-icon").off('click');
				$(".list-item-icon").each(function () {
					$(this).on('click', function () {
						that._show_icon_details_modal($(this));
					});
				});
			}
		});
	},

	resize: function () {
		var width = this.DOM_CONTENT.width();
		var counts_per_row = 0;
		var list_width = 0;

		if (width < 600) {
			$(".list-item").find("i").removeClass("fa-4x").addClass("fa-2x");
			// this.ICON_LIST.WIDTH = this.ICON_LIST.SMALL.WIDTH;
			this.ICON_LIST.MIN_WIDTH = this.ICON_LIST.SMALL.MIN_WIDTH;
			this.ICON_LIST.MAX_WIDTH = this.ICON_LIST.SMALL.MAX_WIDTH;
			this.ICON_LIST.STEP = this.ICON_LIST.SMALL.STEP;
		} else {
			$(".list-item").find("i").removeClass("fa-2x").addClass("fa-4x");
			// this.ICON_LIST.WIDTH = this.ICON_LIST.LARGE.WIDTH;
			this.ICON_LIST.MIN_WIDTH = this.ICON_LIST.LARGE.MIN_WIDTH;
			this.ICON_LIST.MAX_WIDTH = this.ICON_LIST.LARGE.MAX_WIDTH;
			this.ICON_LIST.STEP = this.ICON_LIST.LARGE.STEP;
		}

		counts_per_row = Math.round(width / this.ICON_LIST.WIDTH);
		list_width = width /counts_per_row;
		// var counts_per_row = Math.round(width / this.ICON_LIST.LARGE.WIDTH);
		// var list_width = width / counts_per_row;
		
		$(".list-item").css("width", list_width);
	},

	bind_all_actions: function () {
		this.bind_navbar_actions();
		this.bind_scroll_to_top_action();
		this.bind_toolbar_scales_action();
		this.bind_modal_action();
		this.bind_toolbar_styles_action();
		this.bind_copy_sample_code();
	},

	// 绑定页面图标缩放工具栏按钮
	bind_toolbar_scales_action: function () {
		var that = this;

		that.TOOLBAR_SCALES.ICON_ITEM_WIDTH_MAX.on('click', function () {
			that.ICON_LIST.WIDTH = that.ICON_LIST.MAX_WIDTH;
			that.resize();
		});

		that.TOOLBAR_SCALES.ICON_ITEM_WIDTH_MIN.on('click', function () {
			that.ICON_LIST.WIDTH = that.ICON_LIST.MIN_WIDTH;
			that.resize();
		});

		that.TOOLBAR_SCALES.ICON_ITEM_WIDTH_PLUS.on('click', function () {
			that.ICON_LIST.WIDTH + that.ICON_LIST.STEP > that.ICON_LIST.MAX_WIDTH ? that.ICON_LIST.MAX_WIDTH : that.ICON_LIST.WIDTH += that.ICON_LIST.STEP;
			that.resize();
		});

		that.TOOLBAR_SCALES.ICON_ITEM_WIDTH_MINUS.on('click', function () {
			that.ICON_LIST.WIDTH - that.ICON_LIST.STEP < that.ICON_LIST.MIN_WIDTH ? that.ICON_LIST.MIN_WIDTH : that.ICON_LIST.WIDTH -= that.ICON_LIST.STEP;
			that.resize();
		});
	},

	// 绑定图标详情对话框工具栏按钮
	bind_toolbar_styles_action: function () {
		var that = this;

		$.each(that.TOOLBAR_STYLES, function (index, item) {
			$.each(item, function (index, item) {
				if ($(item).attr('type') === "button") {
					$(item).on('click', function () {
						that._generate_sample_code($(item));
					});
				}
			});
		});
	},

	bind_navbar_actions: function () {
		var that = this;

		$(".nav-link:not(.nav-dropdown-toggle)").on('click', function () {
			that._remove_active_status();

			$(this).addClass("active")

			that.generate_icon_lists($(this).attr("value"));
		});
	},

	bind_scroll_to_top_action: function () {
		this.BUTTON_SCROLL_TO_TOP.on('click', function () {
			$("body").animate({
				scrollTop: 0
			});
		})
	},

	bind_copy_sample_code: function () {
		new ClipboardJS(this.BUTTON_COPY_SAMPLE_CODE);
	},

	// 绑定图标详情对话框 显示/隐藏 事件
	bind_modal_action: function () {
		var that = this;

		that.DOM_MODAL.on('show.bs.modal', function () {
			that.DOM_MODAL.css('display', 'block');
			that.DOM_MODAL_DIALOG.css({
				'margin-top': Math.max(($(window).height() - that.DOM_MODAL_DIALOG.height()) / 2)
			});
		});

		that.DOM_MODAL.on('hide.bs.modal', function () {
			that._reset_sample_code_all();
		});
	},

	_remove_active_status: function () {
		$(".nav-link").removeClass("active");
	},

	_generate_list_item: function (list) {
		var result =
					'<li>\
						<div class="list-item">\
							<div class="list-item-icon">\
								<i class="{0} fa-{1} fa-4x"></i>\
							</div>\
							<div class="list-item-label">\
								<span class="select-all">{1}</span>\
							</div>\
						</div>\
					</li>';

		return result.format(this.STYLE_PREFIX[list.style], list.name);
	},

	// 图标详情对话框中生成示例代码和设置图标样式
	_generate_sample_code: function (dom) {
		var that = this;

		var normal_color_status = that.TOOLBAR_STYLES.NORMAL.COLOR.hasClass('active'),
			normal_size_status = that.TOOLBAR_STYLES.NORMAL.SIZE.hasClass('active'),
			normal_border_status = that.TOOLBAR_STYLES.NORMAL.BORDER.hasClass('active');

		var flip_v_status = that.TOOLBAR_STYLES.FLIP.VERTICAL.hasClass('active'),
			flip_h_status = that.TOOLBAR_STYLES.FLIP.HORIZONTAL.hasClass('active'),
			flip_both_status = that.TOOLBAR_STYLES.FLIP.BOTH.hasClass('active');

		var rotation_spin_status = that.TOOLBAR_STYLES.ROTATION.SPIN.hasClass('active'),
			rotation_pulse_status = that.TOOLBAR_STYLES.ROTATION.PULSE.hasClass('active'),
			rotation_90_status = that.TOOLBAR_STYLES.ROTATION.ROTATE_90.hasClass('active'),
			rotation_180_status = that.TOOLBAR_STYLES.ROTATION.ROTATE_180.hasClass('active'),
			rotation_270_status = that.TOOLBAR_STYLES.ROTATION.ROTATE_270.hasClass('active');

		// {0} style
		// {1} name
		// {2} size
		// {3} border
		// {4} flip
		// {5} rotation
		// {6} color
		var sample_code = '<i class="{0} {1}{2}{3}{4}{5}"{6}></i>';

		switch (dom.attr('id')) {
			case that.TOOLBAR_STYLES.NORMAL.ID.COLOR:
				normal_color_status = !normal_color_status;
				break;
			case that.TOOLBAR_STYLES.NORMAL.ID.SIZE:
				normal_size_status = !normal_size_status;
				break;
			case that.TOOLBAR_STYLES.NORMAL.ID.BORDER:
				normal_border_status = !normal_border_status;
				break;

			case that.TOOLBAR_STYLES.FLIP.ID.VERTICAL:
			case that.TOOLBAR_STYLES.FLIP.ID.HORIZONTAL:
			case that.TOOLBAR_STYLES.FLIP.ID.BOTH:

			case that.TOOLBAR_STYLES.ROTATION.ID.SPIN:
			case that.TOOLBAR_STYLES.ROTATION.ID.PULSE:
			case that.TOOLBAR_STYLES.ROTATION.ID.ROTATE_90:
			case that.TOOLBAR_STYLES.ROTATION.ID.ROTATE_180:
			case that.TOOLBAR_STYLES.ROTATION.ID.ROTATE_270:
				that._reset_flip_buttons(dom);
				that._reset_rotation_buttons(dom);

				flip_v_status = false;
				flip_h_status = false;
				flip_both_status = false;

				rotation_spin_status = false;
				rotation_pulse_status = false;
				rotation_90_status = false;
				rotation_180_status = false;
				rotation_270_status = false;
				break;
		}

		switch (dom.attr('id')) {
			case that.TOOLBAR_STYLES.FLIP.ID.VERTICAL:
				flip_v_status = !that.TOOLBAR_STYLES.FLIP.VERTICAL.hasClass('active');
				break;
			case that.TOOLBAR_STYLES.FLIP.ID.HORIZONTAL:
				flip_h_status = !that.TOOLBAR_STYLES.FLIP.HORIZONTAL.hasClass('active');
				break;
			case that.TOOLBAR_STYLES.FLIP.ID.BOTH:
				flip_both_status = !that.TOOLBAR_STYLES.FLIP.BOTH.hasClass('active');
				break;
			case that.TOOLBAR_STYLES.ROTATION.ID.SPIN:
				rotation_spin_status = !that.TOOLBAR_STYLES.ROTATION.SPIN.hasClass('active');
				break;
			case that.TOOLBAR_STYLES.ROTATION.ID.PULSE:
				rotation_pulse_status = !that.TOOLBAR_STYLES.ROTATION.PULSE.hasClass('active');
				break;
			case that.TOOLBAR_STYLES.ROTATION.ID.ROTATE_90:
				rotation_90_status = !that.TOOLBAR_STYLES.ROTATION.ROTATE_90.hasClass('active');
				break;
			case that.TOOLBAR_STYLES.ROTATION.ID.ROTATE_180:
				rotation_180_status = !that.TOOLBAR_STYLES.ROTATION.ROTATE_180.hasClass('active');
				break;
			case that.TOOLBAR_STYLES.ROTATION.ID.ROTATE_270:
				rotation_270_status = !that.TOOLBAR_STYLES.ROTATION.ROTATE_270.hasClass('active');
				break;
		}

		that.ICON_DETAILS.SAMPLE_CODE.val(sample_code.format(
			that.ICON_DETAILS.STYLE,
			that.ICON_DETAILS.ICON,
			normal_size_status ? ' fa-4x' : '',
			normal_border_status ? ' fa-border' : '',
			flip_v_status ? ' fa-flip-vertical' :
							flip_h_status ? ' fa-flip-horizontal' :
							flip_both_status ? ' fa-flip-both' : '',
			rotation_spin_status ? ' fa-spin' :
							rotation_pulse_status ? ' fa-pulse':
							rotation_90_status ? ' fa-rotate-90':
							rotation_180_status ? ' fa-rotate-180':
							rotation_270_status ? ' fa-rotate-270' : '',
			normal_color_status ? ' style="color: dodgerblue;"' : ''
		));

		// 设置展示图标样式
		normal_color_status ? that.ICON_DETAILS.SAMPLE_ICON.css({'color': 'dodgerblue'}) : that.ICON_DETAILS.SAMPLE_ICON.css({'color': ''});
		normal_size_status ? that.ICON_DETAILS.SAMPLE_ICON.addClass('fa-4x') : that.ICON_DETAILS.SAMPLE_ICON.removeClass('fa-4x');
		normal_border_status ? that.ICON_DETAILS.SAMPLE_ICON.addClass('fa-border') : that.ICON_DETAILS.SAMPLE_ICON.removeClass('fa-border');
		
		flip_v_status ? that.ICON_DETAILS.SAMPLE_ICON.addClass('fa-flip-vertical') : that.ICON_DETAILS.SAMPLE_ICON.removeClass('fa-flip-vertical');
		flip_h_status ? that.ICON_DETAILS.SAMPLE_ICON.addClass('fa-flip-horizontal') : that.ICON_DETAILS.SAMPLE_ICON.removeClass('fa-flip-horizontal');
		flip_both_status ? that.ICON_DETAILS.SAMPLE_ICON.addClass('fa-flip-both') : that.ICON_DETAILS.SAMPLE_ICON.removeClass('fa-flip-both');
		
		rotation_spin_status ? that.ICON_DETAILS.SAMPLE_ICON.addClass('fa-spin') : that.ICON_DETAILS.SAMPLE_ICON.removeClass('fa-spin');
		rotation_pulse_status ? that.ICON_DETAILS.SAMPLE_ICON.addClass('fa-pulse') : that.ICON_DETAILS.SAMPLE_ICON.removeClass('fa-pulse');
		rotation_90_status ? that.ICON_DETAILS.SAMPLE_ICON.addClass('fa-rotate-90') : that.ICON_DETAILS.SAMPLE_ICON.removeClass('fa-rotate-90');
		rotation_180_status ? that.ICON_DETAILS.SAMPLE_ICON.addClass('fa-rotate-180') : that.ICON_DETAILS.SAMPLE_ICON.removeClass('fa-rotate-180');
		rotation_270_status ? that.ICON_DETAILS.SAMPLE_ICON.addClass('fa-rotate-270') : that.ICON_DETAILS.SAMPLE_ICON.removeClass('fa-rotate-270');
	},

	// 图标详情对话框隐藏时将展示图标和工具栏按钮恢复默认设置
	_reset_sample_code_all: function () {
		// this.ICON_DETAILS.SAMPLE_CODE.val('');
		this.ICON_DETAILS.SAMPLE_ICON.attr('class', '').css({'color': ''}); //far fa-address-book fa-4x');
		
		this.TOOLBAR_STYLES.NORMAL.COLOR.removeClass('active');
		this.TOOLBAR_STYLES.NORMAL.SIZE.addClass('active');
		this.TOOLBAR_STYLES.NORMAL.BORDER.removeClass('active');
		
		this._reset_rotation_buttons();
		this._reset_flip_buttons();
	},

	_reset_flip_buttons: function (dom) {
		if (dom === undefined) {
			this.TOOLBAR_STYLES.FLIP.VERTICAL.removeClass('active');
			this.TOOLBAR_STYLES.FLIP.HORIZONTAL.removeClass('active');
			this.TOOLBAR_STYLES.FLIP.BOTH.removeClass('active');
		} else {
			$.each(this.TOOLBAR_STYLES.FLIP, function () {
				if (dom.attr('id') !== $(this).attr('id')) {
					$(this).removeClass('active');
				}
			});
		}
	},

	_reset_rotation_buttons: function (dom) {
		if (dom === undefined) {
			this.TOOLBAR_STYLES.ROTATION.SPIN.removeClass('active');
			this.TOOLBAR_STYLES.ROTATION.PULSE.removeClass('active');
			this.TOOLBAR_STYLES.ROTATION.ROTATE_90.removeClass('active');
			this.TOOLBAR_STYLES.ROTATION.ROTATE_180.removeClass('active');
			this.TOOLBAR_STYLES.ROTATION.ROTATE_270.removeClass('active');
		} else {
			$.each(this.TOOLBAR_STYLES.ROTATION, function () {
				if (dom.attr('id') !== $(this).attr('id')) {
					$(this).removeClass('active');
				}
			});
		}
	},

	// 根据选定图标项内容填充图标详情对话框内容
	_show_icon_details_modal: function (item) {
		// far fa-address-book fa-4x
		var params = item.find('i').attr('class').split(' ');
		
		this.ICON_DETAILS.STYLE = params[0];
		this.ICON_DETAILS.ICON = params[1];
		this.ICON_DETAILS.TITLE = this.ICON_DETAILS.ICON.substr(3);

		this.DOM_MODAL_TITLE.html('{0}: <label class="select-all">{1}</label>'.format(this.STYLE_NAME[this.ICON_DETAILS.STYLE], this.ICON_DETAILS.TITLE));
		this.ICON_DETAILS.SAMPLE_CODE.val('<i class="{0}"></i>'.format(item.find('i').attr('class')));

		this.ICON_DETAILS.SAMPLE_ICON.addClass(this.ICON_DETAILS.STYLE).addClass(this.ICON_DETAILS.ICON).addClass('fa-4x');
		this.DOM_MODAL.modal("show");
	}
};


String.prototype.format = String.prototype.f = function () {
	var s = this,
		i = arguments.length;

	while (i--) {
		s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
	}
	return s;
};